<template>
  <div class="code-login">
    <div class="form-group">
      <label for="phone">手机号</label>
      <input type="text" id="phone" v-model="phone" placeholder="请输入手机号" />
    </div>
    <div class="form-group verify-code-group">
      <label for="verifyCode">验证码</label>
      <div class="code-input-wrapper">
        <input type="text" id="verifyCode" v-model="verifyCode" placeholder="请输入验证码" />
        <button class="code-btn" @click="sendCode" :disabled="countdown > 0">
          {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
        </button>
      </div>
    </div>
    <button @click="handleLogin" class="login-btn">登录</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const phone = ref('')
const verifyCode = ref('')
const countdown = ref(0)

// 发送登录表单事件
const emit = defineEmits(['login'])

// 发送验证码
const sendCode = () => {
  if (!phone.value) {
    alert('请输入手机号')
    return
  }

  // 验证手机号格式
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    alert('请输入正确的手机号')
    return
  }

  // 开始倒计时
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)

  // 这里可以添加发送验证码的实际逻辑
  console.log('发送验证码到手机:', phone.value)
}

// 验证码登录处理
const handleLogin = () => {
  if (!phone.value) {
    alert('请输入手机号')
    return
  }

  if (!verifyCode.value) {
    alert('请输入验证码')
    return
  }

  // 向父组件发送登录信息
  emit('login', {
    type: 'code',
    phone: phone.value,
    verifyCode: verifyCode.value,
  })
}
</script>

<style scoped>
.code-login {
  width: 100%;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
}

input[type='text'] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition:
    border 0.3s,
    box-shadow 0.3s;
  background-color: rgba(255, 255, 255, 0.8);
}

input[type='text']:focus {
  border-color: #ff69b4;
  outline: none;
  box-shadow: 0 0 8px rgba(255, 105, 180, 0.3);
}

/* 验证码输入框 */
.verify-code-group label {
  width: 100%;
}

.code-input-wrapper {
  display: flex;
  gap: 10px;
}

.code-input-wrapper input {
  flex: 1;
}

.code-btn {
  padding: 0 15px;
  border: none;
  background: linear-gradient(45deg, #ff69b4, #8dd9ff);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  transition: all 0.3s;
  min-width: 110px;
}

.code-btn:hover:not(:disabled) {
  box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}

.code-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(45deg, #ff69b4, #ff8da1);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.login-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}
</style>
